<template>
  <div class="history">
    <van-swipe-cell v-for="(item,index) in list" :key="index">
      <van-card
        num="1"
        :price="item.retailPrice | Price"
        :desc="item.name"
        :title="item.brief"
        class="goods-card"
        :thumb="item.picUrl"
      />
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)"/>
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import API from "@/utils/api.js";
import { Card, SwipeCell, Button,Toast } from "vant";
export default {
  name: "History",
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getData()
  },
  methods:{
   del(id){
       this.$post(API. POST_FOOTPRINT_DELETE,{
           token: this.$store.state.token,
           id: id
       }).then(res =>{
           console.log(res)
           setTimeout(()=>{
             this.getData()
           },Toast.success('删除成功'),1000)
       })
   },
   getData(){
    this.$get(API.GET_FOOTPRINT_LIST, {
      token: this.$store.state.token
    }).then(res => {
      console.log(res);
      this.list = res.data.list;
    });
   }
  },
  components: {
    [Card.name]: Card,
    [SwipeCell.name]: SwipeCell,
    [Button.name]: Button,
    [Toast.name]: Toast
  },
  filters: {
    Price: (value) => {
      return value + ".00";
    },
  },
};
</script>

<style lang="less" scoped>
.history {
  margin-top: 46px;
  .delete-button {
    height: 100%;
  }
   .van-card__price{
    color: rgb(238, 74, 74);
  }
}
</style>